<template>
  <div class="info-nav">
    <template v-if="userStore.isLogin">
      <UserInfo :user-info="userStore.userInfo"></UserInfo>
      <div class="information">123</div>
    </template>
    <template v-else>
      <div class="not-login">
        <h1 class="title">还没有登录~</h1>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331002803_df7d8.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666096137&t=dfff9938681f924a8e986b89cb3d9392"
          alt=""
        />
        <UserShareCard></UserShareCard>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import user from "@/store/user";
import UserInfo from "@/components/UserInfoSide/UserInfoSide.vue";
import UserShareCard from "@/components/UserShareCard/UserShareCard.vue";
const userStore = user();
</script>

<style scoped lang="less">
.info-nav {
  position: sticky;
  top: 60px;
  right: -175px;
  display: flex;
  flex-direction: column;
  // align-items: center;
  margin-top: 40px;
  // max-width: 280px;
  max-width: 250px;
  min-height: 300px;
  height: fit-content;
  // box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 10px;
  transition: all 0.3s linear;
  padding: 10px;
  z-index: 99;
  > img {
    max-width: 200px;
    width: 100%;
    height: 100%;
  }
  .not-login {
    width: 250px;
    margin-left: 10px;
    .title {
      text-align: center;
    }
    .user-card-container {
      padding: 10px 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      border-bottom: 10px;
      box-sizing: border-box;
    }
    img {
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
